<template>
	<view class="regionSelection">
		<span>双人阅读区</span>
		<span>明区-单人</span>
		<span>暗区-单人</span>
	</view>
	<scroll-view scroll-x class="scroll1">
		<view :class="{'week':'week','changeWeek': v.changeFalse == true}" @click="changeWeek(v.id,v.week)"
			v-for="v in changeStyle" :key="v.id">{{v.week}}</view>
	</scroll-view>
	<view class="content">
<view class="content-top">
			<view class="bgColor"></view><text>已满</text>
			<view class="bgColor"></view><text>空闲</text>
			<view class="bgColor"></view><text>已选</text>
		</view>
		<!-- 座位开始 -->
		<scroll-view class="scroll2 clearfix" scroll-x="true">
			<view v-if="seatActive==0">
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<!-- 第二个 -->
			<view v-else-if="seatActive==1">
				<view>2</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<!-- 第三个 -->
			<view v-else-if="seatActive==2">
				<view>3</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<!-- 第四个 -->
			<view v-else-if="seatActive==3">
				<view>4</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<!-- 第五个 -->
			<view v-else-if="seatActive==4">
				<view>5</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<view v-else-if="seatActive==5">
				<view>6</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
			<view v-else-if="seatActive==6">
				<view>7</view>
				<view class="seatDate" v-for="i in col" :key="i.text">
					<!-- seatData控制全部在横排 -->
					<!-- seat-col控制在一列 -->
					<view class="seat-col">
						<text>{{i.text}}</text>
						<view v-for="(j,index) in i.date" :key="index" :style="{'backgroundColor': colorArr[j.active]}" @click="changeBg(i.id,j.id)">{{j.dataSon}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer"  @click="show()">立即预约</view>
	</view>
</template>

<script>
	import {reactive, toRefs,} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	export default {
		setup(){
			// -----------------------------------6/11------------
			const date = new Date()
			let mm =  '' + (date.getMonth() + 1)
			if(mm.length<2) mm = '0' + mm
			let dd = '' + date.getDate()
			let newDate = mm + '-' + dd
			//6/12
			const date1 = new Date((new Date()/1000+86400)*1000)
			let mm1 =  '' + (date1.getMonth() + 1)
			if(mm1.length<2) mm1 = '0' + mm1
			let dd1 = '' + date1.getDate()
			let newDate1 = mm1 + '-' + dd1
			//6/13
			// date mm dd newDate num
			const date2 = new Date((new Date()/1000+86400*2)*1000)
			let mm2 =  '' + (date2.getMonth() + 1)
			if(mm2.length<2) mm2 = '0' + mm2
			let dd2 = '' + date2.getDate()
			let newDate2 = mm2 + '-' + dd2
			// 6/14

			const date3 = new Date((new Date()/1000+86400*3)*1000)
			let mm3 =  '' + (date3.getMonth() + 1)
			if(mm3.length<2) mm3 = '0' + mm3
			let dd3 = '' + date3.getDate()
			let newDate3 = mm3 + '-' + dd3
			//6/15
			const date4 = new Date((new Date()/1000+86400*4)*1000)
			let mm4 =  '' + (date4.getMonth() + 1)
			if(mm4.length<2) mm4 = '0' + mm4
			let dd4 = '' + date4.getDate()
			let newDate4 = mm4 + '-' + dd4
			//6/16
			const date5 = new Date((new Date()/1000+86400*5)*1000)
			let mm5 =  '' + (date5.getMonth() + 1)
			if(mm5.length<2) mm5 = '0' + mm5
			let dd5 = '' + date5.getDate()
			let newDate5 = mm5 + '-' + dd5
			// 6/17
			let getDate = newDate 
			// ---------------------------------------6/11------------
			const data = reactive({
				// ---------------数据--------------------------
				
				//选择座位的样式的类名  类名用状态来添加   0 空闲  1 已选 2 已满
				colorArr:['#81D3F8','#D94154','#AAAAAA'],
				// -------时间---
				
				// ==========
				//点击改变 星期几的css样式
				changeStyle: [
					{ id:0, changeFalse: true, 	week:`${newDate}`},
					{ id:1, changeFalse: false, week:`${newDate1}`},
					{ id:2, changeFalse: false, week:`${newDate2}`},
					{ id:3, changeFalse: false, week:`${newDate3}`},
					{ id:4, changeFalse: false, week:`${newDate4}`},
					{ id:5, changeFalse: false, week:`${newDate5}`},
				],
				col:[
					{	
						id:0,
						text:'1号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
						],
					},
					{
						id:1,
						text:'2号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							
						],
					},
					{
						id:2,
						text:'3号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							
						],
					},
					{
						id:3,
						text:'4号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							
						],
					},
					{
						id:4,
						text:'5号桌',
						date:[
							{id:0,dataSon:'09:00-10:00',active : 0},
							{id:1,dataSon:'10:00-11:00',active : 0},
							{id:2,dataSon:'13:00-14:00',active : 0},
							{id:3,dataSon:'14:00-15:00',active : 0},
							{id:4,dataSon:'16:00-17:00',active : 0},
							{id:5,dataSon:'17:00-18:00',active : 0},
							{id:6,dataSon:'18:00-19:00',active : 0},
							
						],
					},
				],
				// 显示对应的 座位  利用状态判断 默认是 0
				seatActive: 0,
				// ---------------方法-------------------------
				show() {
					uni.showModal({
						title: '是否预定此座位',
						content:'11',
						success(){
							console.log('111')
						}
					});
				},
				changeWeek(id,date){
			// 1.我先判断changeFalse有没有true,有我就都先变为false
			// 2.再把id  为这个的变为changeFalse
				getDate = date
					data.changeStyle.map((v)=> {
						v.changeFalse == true ? v.changeFalse = false : v.changeFalse
					})
					data.changeStyle[id].changeFalse = true
					data.seatActive = id
				},
				changeBg(i,j){
					console.log(i,j)
					console.log(data)
					// 1. 首先我应该是获取后台的数据,先渲染页面
					// 当我点击的时候,出现模态框,显示已经选择的座位,并且显示需要修改的位置
					// 
					// 我只能选择空闲的位置   如果是已满 我是不能选择的
					data.col[i].date[j].active == 0 ? data.col[i].date[j].active = 1 : data.col[i].date[j].active
				}
			})
			
			onLoad(()=> {
				uni.getStorage({
					key: 'id',
					success: function (res) {
						console.log(res.data);
					},
					fail(err) {
						console.log('出错了',err)
					}
				});
			})
			
			return {...toRefs(data)}
			
		}
		
	}

</script>

<style lang="scss">
	.regionSelection {
		width: 90%;
		height: auto;
		margin: 40rpx auto;

	}

	.regionSelection span {
		margin-right: 2rpx;
		display: inline-block;
		color: #ffff;
		width: 30%;
		height: auto;
		padding: 20rpx 10rpx;
		line-height: 20rpx;
		background-color: #aaaaaa;
		text-align: center;
		font-size: 24rpx
	}

	span:first-child {
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	span:last-child {
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}

	span:hover {
		background-color: #8383f4;
	}

	/*  */
	.scroll1 {
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 1px solid #ccc;
		white-space: nowrap;
	}

	.week {
		display: inline-block;
		width: 200rpx;
		height: 63rpx;
		text-align: center;
		line-height: 63rpx;
		margin-left: 20rpx;
	}

	.changeWeek {
		color: #8080FF;
		border-bottom: 7rpx solid #8080FF;
	}
	.content {
		.content-top {
			margin-top: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: 60rpx;
			line-height: 60rpx;
				.bgColor {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					border-radius: 4rpx;
					background-color: #AAAAAA;
				}
				text {
					font-size: 24rpx;
				}
				.bgColor:nth-of-type(2) {
					background-color: #81D3F8;
				}
				.bgColor:nth-of-type(3) {
					background-color: #D94154;
				}
		}
		.scroll2 {
			height: 920rpx;
			white-space: nowrap;
			.seatDate {
				display: inline-block;
				.seat-col {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					width: 200rpx;
					height: 920rpx;
					font-size: 24rpx;
					view {
						width: 160rpx;
						text-align: center;
						height: 80rpx;
						line-height: 80rpx;
						color: white;
						background-color: #81D3F8;
					}
				}
				
			}
		}
	}
	.footer {
		position: absolute;
		bottom: 0;
		width: 750rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: white;
		text-align: center;
		background: linear-gradient(to right,#9392D5, #B4B3F9);
	}
	
	
	
	
</style>
